<template>
  <div>
    <!-- 历史记录 -->
    <div class="hisotry_box">
      <div class="title">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="clearHistorys" />
      </div>
      <div class="tag">
        <van-tag
          @click="searchTag(item)"
          plain
          v-for="(item, i) in historyKeywordList"
          :key="i"
          >{{ item }}</van-tag
        >
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="hisotry_box">
      <div class="title">
        <h4>热门搜索</h4>
      </div>
      <div class="tag">
        <van-tag
          size="large"
          :class="[item.is_hot === 1 ? 'red' : '']"
          plain
          v-for="(item, i) in hotKeywordList"
          :key="i"
          @click="searchTag(item.keyword)"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'history_box',
  props: ['hotKeywordList', 'historyKeywordList'],
  methods: {
    // 点击tag搜索
    searchTag (val) {
      this.$emit('searchTag', val)
    },
    // 清空lishijilu
    clearHistorys () {
      this.$emit('clearHistorys')
    }
  }
}
</script>

<style lang='less' scoped>
.hisotry_box {
  background-color: #fff;
  padding: 0.1rem;
  margin-bottom: 0.2rem;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
    h4 {
      font-weight: 500;
      color: darkslategray;
      font-family: "黑体";
      font-size: 0.18rem;
    }
  }
}

.van-tag {
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
  padding: 0 0.04rem;
  font-size: 0.12rem;
}
.red {
  color: red;
}
</style>
